<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="用户名" prop="queryUserName">
        <el-input
          v-model="queryParams.queryUserName"
          placeholder="搜索用户名"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="会员等级" prop="queryVip">
        <el-select
          v-model="queryParams.queryVip"
          clearable
          placeholder="请选择"
        >
          <el-option
            v-for="dict in vipList"
            :key="dict.value"
            :label="dict.label"
            :value="dict.label"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Refresh"
          @click="handleUpdateList"
          :loading="updateLoading"
          >更新消费金额</el-button
        >
      </el-col>

      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="pageList">
      <el-table-column label="序号" align="center" type="index" width="100" />
      <el-table-column
        label="用户qq"
        align="center"
        prop="id"
        width="150"
      />
      <el-table-column
        label="昵称"
        align="center"
        prop="nickname"
        width="150"
      />
      <el-table-column
        label="店铺昵称"
        align="center"
        prop="aliasNickname"
        width="150"
      />
      <el-table-column label="会员等级" align="center" prop="vip" />

      <el-table-column
        label="总消费金额"
        align="center"
        prop="allMoney"
        width="120"
      />
      <el-table-column
        label="有效消费"
        align="center"
        prop="validMoney"
        width="120"
      />
      <el-table-column
        label="过期消费"
        align="center"
        prop="overMoney"
        width="120"
      />
      <el-table-column
        label="转让总次数"
        align="center"
        prop="useAllSum"
        width="80"
      />
      <el-table-column
        label="转让已用次数"
        align="center"
        prop="useOverSum"
         width="80"
      />
      <el-table-column
        label="转让剩余次数"
        align="center"
        prop="useLastSum"
         width="80"
      />

      
      <el-table-column
        label="更新时间"
        align="center"
        prop="updatedAt"
        width="200"
      >
        <template #default="scope">
          <span>{{
            parseTime(scope.row.updatedAt, "{y}-{m}-{d} {h}:{i}:{s}")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
            link
            type="primary"
            icon="Edit"
            @click="handleReload(scope.row)"
            >更新</el-button
          >
          <!-- <el-button
            link
            type="primary"
            icon="Edit"
            @click="handleOpenSub(scope.row)"
            v-hasPermi="['business:goods:edit']"
            >查看详情</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 弹出框 -->
    <el-dialog
      :title="detailTitle"
      v-model="openSub"
      width="80%"
      append-to-body
    >
      <com-detail :title="detailTitle" :queryusername="queryusername" />
    </el-dialog>
  </div>
</template>

<script setup name="Ranking">
import ComDetail from "./comDetail.vue";

import {
  listMoney,
  moneyTrigger,
  moneyTriggerSign,
  getMoneyDetals,
} from "@/api/business/ranking";
import {
  listAllDicts,
} from "@/api/business/dicts";

const { proxy } = getCurrentInstance();

const pageList = ref([]);
const loading = ref(true);
const updateLoading = ref(false);
const showSearch = ref(true);

const total = ref(0);
const detailTitle = ref(""); // 详情标题栏
const queryusername = ref(""); // 查询用户名
// 会员等级
const vipList = ref([]);

const loadingSub = ref(false);
const pageListSub = ref([]);
const openSub = ref(false); // 查看购买详情

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    queryUserName: undefined,
    queryVip: undefined,
  },
});

const { queryParams } = toRefs(data);

/** 查询公告列表 */
function getList() {
  loading.value = true;
  listMoney(queryParams.value).then((response) => {
    pageList.value = response.data.rows;
    total.value = response.data.count;
    loading.value = false;
  });
}
/** 查询公告列表 */
function getVipList() {

 
  loading.value = true;
  let sendData = {
    queryDictCode: '2',
  };

  listAllDicts(sendData).then((response) => {
    
    loading.value = false;
    vipList.value = response.data.map((item) => {
      return {
        value: item.dictValue,
        label: item.dictLabel,
      };
    });
  });
 

 

}

/** 返回用户昵称信息  */
function handleReturnNickname(arr) {
  if (arr && arr.length == 0) {
    return "";
  } else {
    let arr1 = arr.map((item) => {
      return item.name + "-" + item.platform_user.nickName;
    });
    let str = arr1.join("|");
    return str;
  }
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 更新列表金额 */
function handleUpdateList() {
  updateLoading.value = true;
  moneyTrigger()
    .then((response) => {
      updateLoading.value = false;
      if (response.code == 200) {
        proxy.$modal.msgSuccess("操作成功");
      } else {
        proxy.$modal.msgSuccess("失败");
      }
      getList();
    })
    .catch(() => {
      updateLoading.value = false;
    });
}
/** 更新单个金额 */
function handleReload(row) {
  updateLoading.value = true;
  moneyTriggerSign(row.id)
    .then((response) => {
      updateLoading.value = false;
      if (response.code == 200) {
        proxy.$modal.msgSuccess("操作成功");
      } else {
        proxy.$modal.msgSuccess("失败");
      }
      getList();
    })
    .catch(() => {
      updateLoading.value = false;
    });
}

/** 查看购买详情 */
function handleOpenSub(row) {
  openSub.value = true;

  detailTitle.value = `用户${row.userName}-${row.buyerQQNickName}-${row.buyerQQAliasNickName}的购买详情`;
  queryusername.value = row.userName;
}
getList();
getVipList();
</script>
<style lang="scss" scoped>
.color-blue {
  color: rgb(0, 119, 255);
  cursor: pointer;
}
.avatar-uploader {
  width: 200px;
  height: 300px;
  .avatar {
    width: 100%;
    height: 100%;
  }
}
.avatar-uploader :deep(.el-upload) {
  width: 100%;
  height: 100%;
  border: 1px dashed #dcdfe6;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader :deep(.el-upload:hover) {
  border-color: #409eff;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
